<template>
  <div>
    <h4>table/index.vue</h4>
    <a-table
      size="small"
      :scroll="{ x: 1300 }"
      :dataSource="[{ index: 1, name: 'tusuzer' }]"
      :loading="false"
      :columns="userColumns"
      :canResize="false"
      bordered
      :pagination="{
        current: current,
        pageSize: pageSize,
        total: total,
        showSizeChanger: true,
        size: 'small',
        showQuickJumper: true,
        showTotal: (total) => `共有total条数据`,
      }"
    >
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'operation'"> </template>
      </template>
    </a-table>
    <a-button v-tan="'hahaha'">按钮12312</a-button>
    <a-input v-model:value="val"></a-input>
    <common-demo :msg="val"></common-demo>
    <p>{{ vis }}</p>
    <a-button @click="vis = !vis">{{ vis }}</a-button>
    <div v-set-height="'32px'" class="ddd">
      <h3>
        父元素123
        <a-button @click="vis = !vis">点我</a-button>
      </h3>
      <div v-show="vis">子元素</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import CommonDemo from "./components/commonDemo.vue";
import { userColumns } from "./data";

const obj = ref({
  name: "tusuzer",
  son: ref({
    name: "axis",
  }),
});

const val = ref("");
setTimeout(() => {
  obj.value.son.name = "ojbk";
  // console.log(obj.value.son.name);
}, 3000);
console.log(obj);

const vTan = {
  mounted(el: HTMLElement, bind: any) {
    console.log(el, "el元素", bind.value);
  },
};

const vSetHeight = {
  mounted(el: any, bind: any) {
    el.style.height = bind.value;
    el.style.transition = "height 0.2s ease-in-out";
    // alert("mounted");
  },
  updated: function (el: any, bind: any) {
    // alert("updated");
    const childs = [...el.children] || [];
    el.style.height =
      childs.reduce((result: any, cur: any) => result + cur.offsetHeight, 0) +
      "px";
    // console.log("getComputedStyle(el).height", getComputedStyle(el).height);
    // el.style.transition = "height 0.5s ease-in-out;";
  },
};

const vis = ref(false);
</script>

<style scoped>
.ddd {
  background-color: #ccc;
  overflow: hidden;
}
</style>
